import styles from './ProductList.module.less'

import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { product } from '@domains/product/di/productModule';
import { ProductType } from '@domains/product/domain/type/ProductType';
import { ElCard, ElIcon, Icons } from "shared/element-plus";

interface storeType {
    list: Array<ProductType>
}

export default defineComponent({
    setup() {

        const router = useRouter();
        const productService = product.createProductApplicationService();

        const state = reactive<storeType>({
            list: []
        })


        onMounted(() => {
            loadProductList()
        })

        const loadProductList = async () => {
            state.list = await productService.getProductList();
            console.log("state.list: ", state.list);
        }

        const ElCardHeader = () => {
            return (
                <div class="card-header">
                    <ElIcon size={ 15 }>
                        <Icons.Position></Icons.Position>
                    </ElIcon>
                    <span>Card 头部</span>
                </div>
            )
        }

        const ElCardFooter = () => {
            return <div>Footer 底部</div>
        }

        return () => (
            <div class={ styles.ProductList }>
                <h1 class={ styles.test }>商品领域模块 - 商品列表页面3</h1>
                <hr/>
                <h2>从Deno 后端 加载的数据，点击进详情</h2>
                <ElCard>
                    { {
                        header: () => ElCardHeader(),
                        footer: () => ElCardFooter(),
                        default: () =>
                            state.list.map(item =>
                                <p key={ item.id } onClick={ () => {
                                    router.push({ name: 'ProductDetail', query: { id: item.id } });
                                } }>
                                    { item.id } | { item.name } | ¥{ item.price }
                                </p>
                            )
                    } }
                </ElCard>

            </div>
        )
    }
})

// export default defineComponent({
//     setup() {
//         return () => (
//             <div>商品列表</div>
//         )
//     }
// })